<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      margin: 20px auto;
      border: 1px solid #ccc;
      padding: 20px;
    }

    .box .header h2 {
      text-align: center;
    }

    .box .header .select {
      font-size: 30px;
      color: red;
    }

    .box .list {
      display: flex;
      flex-wrap: wrap;
      font-size: 20px;
    }

    .box .list .item {
      padding: 4px 8px;
      border: 1px solid #ccc;
      margin: 6px;
      border-radius: 4px;
    }

    /* active高亮选中 */

    .box .list .active {
      background-color: rgb(155, 17, 17);
      color: #fff;
    }
  </style>
</head>

<body>
  <div>
    <div class="box">
      <div class="header">
        <h2>随机点名器</h2>
        <div>
          <button id="start">开始</button>
          <button id="stop">停止</button>
          <p>恭喜: <span class="select">谁呢?</span></p>
        </div>
      </div>
      <div class="list">
        <!-- <div class="item">张三1</div>
                <div class="item active">张三2</div> -->
      </div>
    </div>
  </div>
  <script>
    // 缓存一些节点
    var listEle = document.querySelector('.list')
    var selEle = document.querySelector('.select')
    var startEle = document.getElementById('start')
    var stopEle = document.getElementById('stop')

    // 取随机数
    function randomInt(min, max) {
      return min + parseInt(Math.random() * (max - min + 1))
    }

    var stus = [
      '陈亚琪', '王博', '白居辉', '白秋月','管浩', '王帅', '马航','周婉钰','温豪',
      '李倬', '纪丹蕾', '李龙', '李涛', '汶赵妮',
      '杜云飞', '李张阳', '张伟东','赵莹莹' ,'朱燕妮', '李满刚', '毛亚俊',
       '郭旭','王璐', '蒲萌', '杨力坤','刘小俊','宋刘昕','白屹忱','尚亚蓉','韩江勇','吴志豪','刘昕若','李立博'
    ]

    // console.log(stus.length);

    // 1. 循环所有的同学数据，创建div标签，最后拼接起来作为 class=list的标签内容
    var htmlStr = ''
    for (var i = 0; i < stus.length; i++) {
      htmlStr += '<div class="item">' + stus[i] + '</div>'
    }
    listEle.innerHTML = htmlStr

    // 2. 开始随机点名
    var timer = null
    var randomIndex // 记录当前选中的随机下标
    startEle.onclick = function () {
      // 如果当前定时器是否正在运行，
      if (timer) {
        return // 则终止程序的执行
      }
      timer = setInterval(function () {
        // a: 随机取数组的下标
        randomIndex = randomInt(0, stus.length - 1)
        // b: 通过下标找到对应学员的DOM节点，并添加上类名active
        // 排他法：其他元素先要移除active,当前元素添加active
        var children = listEle.children // children获取所有的子元素节点
        for (var i = 0; i < children.length; i++) {
          children[i].classList.remove('active')
        }
        children[randomIndex].classList.add('active')
      }, 16)
    }

    // 3. 停止点名操作
    stopEle.onclick = function () {
      // a: 清除定时器
      clearInterval(timer) // 清除动作
      timer = null // 赋值假(恢复到初始状态)
      // b: 展示当前选中的同学名
      selEle.innerText = stus[randomIndex]
    }
  </script>
</body>

</html>